<template>
  <div class="content-wrap" @click.prevent="fixedShow = false">
    <van-nav-bar title="密聊">
      <van-icon name="plus" slot="right" @click.stop="fixedShow = !fixedShow"/>
      <van-icon name="cross" slot="left"/>
    </van-nav-bar>
    <search-box :isSearch="isSearch"></search-box>
    <div class="main-content">
      <van-search placeholder="请输入搜索关键词" readonly background="#f5f6f9" shape="round"
                  style="background: #fff" @click="focusSearch"/>
      <div class="scroll-wrapper">
        <scroll class="scroll-list" :data="chatList">
          <div class="list-wrap">
            <van-swipe-cell v-for="(item, index) in chatList" :key="index">
              <div class="message-item" @click="joinChat(item)">
                <div class="avatar">
                  <img :src="item.icon" alt="">
                  <span class="red-num" v-if="item.Notice > 0">{{item.Notice}}</span>
                </div>
                <div class="content">
                  <p class="name">
                    <span>{{item.nick || item.nickname || '昵称未设置'}}</span>
                    <span class="time" v-if="item.updatetime">{{new Date(item.updatetime * 1000).format('hh:mm')}}</span>
                  </p>
                  <p class="msg">{{item.content}}</p>
                </div>
              </div>

              <template slot="right">
                <div class="swipe-btn delete">删除</div>
              </template>
            </van-swipe-cell>
          </div>
          <van-divider :style="{padding: '0 16px'}">共{{chatList.length}}个聊天</van-divider>
        </scroll>
      </div>
    </div>

    <transition name="van-fade">
      <div class="fixed-wrap" v-if="fixedShow">
        <div class="fixed-item">
          <van-icon name="chat"/>
          <span class="text">新建密群</span>
        </div>
        <router-link :to="{name: 'addFriend'}" class="fixed-item">
          <van-icon name="friends"/>
          <span class="text">添加密友</span>
        </router-link>
        <div class="fixed-item">
          <van-icon name="qr"/>
          <span class="text">扫一扫</span>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  import searchBox from '@/components/search-box.vue'
  import { mapState } from 'vuex'
  import Socket from '../../utils/socket'

  export default {
    name: 'home',
    components: {
      searchBox
    },
    data () {
      return {
        isSearch: false,
        fixedShow: false
      }
    },
    computed: {
      ...mapState({
        chatList: state => state.chat.chatList
      })
    },
    methods: {
      focusSearch () {
        this.isSearch = true
        document.querySelector('.van-field__control').focus()
      },
      joinChat (item) {
        let routerName = 'chat'
        let id = item.fid
        if (item.gid) {
          routerName = 'groupChat'
          id = item.gid
        }
        this.$router.push({ name: routerName, params: { id: id } })
      }
    },
    created () {
      if (Socket.Socket) {
        Socket.sendData('ChatDataList')
      }
    },
    mounted () {
    }
  }
</script>

<style scoped lang="scss">
  .main-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #fff;
  }

  .van-search {
    position: relative;
    z-index: 100;
  }

  .van-search__content {
    background: #fff;
  }

  .fixed-wrap {
    position: fixed;
    background: #2b2f41;
    right: .2rem;
    top: 1.2rem;
    z-index: 100;
    padding: 0 .3rem;

    &:before {
      content: "";
      position: absolute;
      top: -10px;
      right: 6px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 10px 16px 10px;
      border-color: transparent transparent #2B2F41 transparent;
    }

    .fixed-item {
      display: flex;
      align-items: center;
      color: #fff;
      padding: .2rem 0;
      border-bottom: 1px solid #6a7290;

      .text {
        font-size: .32rem;
        margin-left: .14rem;
      }

      i {
        font-size: .4rem;
      }
    }
  }
</style>
